<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <style>
        .red{
            color:red;
        }
        .hd1{
            color:green;
        }
        .hd2{
            color:red;
        }
        .color{
            color:blue;
        }
        .font{
            font-size:400px;
        }
    </style>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
    <script src="../node_modules/lodash/lodash.js"></script>
</head>
<body>
    <div id="hd">
        <h1 :class="[success]">houdun</h1>
        <input type="text" v-model="word">
        <input type="checkbox" v-model="copyright">阅读协议
        <p v-if="!copyright">请先阅读协议</p>
        <button v-else>注册</button>
        <li v-for="v in con">
            {{v.title}}
        </li>
    </div>
    <script>
        var app=new Vue({
            el:'#hd',
            watch:{
                word:_.debounce(
                    function(newV,oldV){
                        console.log(newV+'=>'+oldV);
                    },1000)

            },
            data:{
                success:'color',
                hd:{color:true,font:true},
                word:'',
                copyright:false,
                con:[
                    {title:'今天天气真好1',author:'hd'},
                    {title:'今天天气真好2',author:'hd'}
                ]
            }
        })
    </script>
</body>
</html>